<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>我的消息</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{overflow: auto;width: 100%;}
			.mui-content{margin: 0 auto;top: 0rem;overflow: auto;padding: 0!important;}
			ul{padding:0}
			.mui-plus-pullrefresh .mui-scroll-wrapper, .mui-plus-pullrefresh .mui-slider-group{width: 100%;}
			.mui-pull-caption{font-weight: normal;}
			.mui-table-view-chevron{padding:0 1em;}
			.mui-content .message-box{width: 100%!important;/*height: 2.88rem;*/margin-top: 0.32rem;}
			.mui-content .message-box .time{width: 2.3rem;height: 0.36rem;font-size: 0.21rem;margin: 0 auto;background: #bfbfbf;color: #fff;text-align: center;border-radius: 0.05rem;line-height: 0.38rem !important;}
			.mui-content .message-box .message{padding-top:0.43rem;padding-bottom:0.42rem;width: 100%;/*height: 2.3rem;*/background: #fff;margin-top: 0.22rem;position: relative;border-radius: 0.2rem}
			.mui-content .message-box .message .title{width: 5.1rem;/*height: 0.29rem;*/font-size: 0.3rem;/*position: absolute;*//*margin-top:0.43rem;*/margin-left: 0.15rem;}
			.mui-content .message-box .message img{width: 0.8rem;/*height: 0.8rem;position: absolute;*/margin-top: 0.36rem;margin-left: 0.33rem;}
			.mui-content .message-box .message .info{width: 5.22rem;min-height: 0.8rem;/*height: 0.63rem;*/font-size: 0.28rem;line-height: 0.38rem;/*position: absolute;*//*top: 1.14rem;left: 1.36rem;*/margin-left: 1.36rem;margin-top:-1rem;color:#444444;}
			.mui-content .message-box .time{width: 2.3rem;height: 0.36rem;font-size: 0.21rem;margin: 0 auto;background: #bfbfbf;color: #fff;text-align: center;border-radius: 0.05rem;line-height: 0.42rem !important;}
		</style>
	</head>
	<body>
		<div id="scroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view-chevron">
				  <li class=" message-box" v-for="msg in myMessageList">
					<div class="time">{{msg.sendTime}}</div>
					<div class="message">
						<div class="title">【通知消息】{{msg.msgTitle}}</div>
						<img src="../../images/menu/audio13.png" alt="" />
						<div class="info" v-html="msg.msgContent"></div>
					</div>
				  </li>	 
				</ul>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script>
		var pageStart = 0;//当前页码
		var pageSize = 4;//每页显示的条数
		var maxPageNumber = 1;//最大页数
		mui.init({
			pullRefresh: {
				container: "#scroll", //上拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				  up: {//上拉加载
			            contentrefresh: '正在加载...',
			            auto:true,//可选,默认false.自动上拉加载一次
			            contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			            callback: pullupRefresh
			       }
			}
		});
		
		mui.plusReady(function(){
			//消息加载完成后，设置父页面消息未读条数为0
			var workView = plus.webview.getWebviewById("tab-webview-subpage-usercenter-content.html");
			mui.fire(workView,"updateMessageCount",{"messageCount":"0"});
		});
		
		var news = new Vue({
			  el: '#scroll',
			  data: {
			    myMessageList:[]
			  }					  
		  });
		  
	    /**
		 * 上拉加载页面数据
		 */
		function pullupRefresh() {
	        pageStart++;//翻下一页
	        if(pageStart<=maxPageNumber){
	        		loadMore(pageStart,pageSize);//具体取数据的方法
	        }else{
	        		mui('#scroll').pullRefresh().endPullupToRefresh(true);
	        }
		}
		
	   function loadMore(pageStart,pageSize) {
		    var param = 'userId='+getUserId()+'&pageNumber=' + pageStart+ '&random=' + Math.random()+'&pageSize=' + pageSize;
			var url = 'appHttpService/userMessageList.do';
		    utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.state == 0 && data.total > 0) {
					maxPageNumber = data.maxPageNumber;
					var rows = JSON.parse(data.myMessageContentVo);
					if(rows != null && rows.length > 0){
						news.myMessageList = news.myMessageList.concat(convert(rows));
						mui('#scroll').pullRefresh().endPullupToRefresh(false);
					}else{
						mui('#scroll').pullRefresh().endPullupToRefresh(true);
					}
				}else if(data.state == 0 && data.total == 0) {
					mui('#scroll').pullRefresh().endPullupToRefresh(true);
				}
			}, param);
			
		};	
		
	   /**
		 * 1、将服务端返回数据，转换成前端需要的格式
		 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
		 * 
		 * @param {Array} items 
		 */
		function convert(items) {
			var newItems = [];
			items.forEach(function(item) {
				newItems.push({
					sendTime: item.sendTime,
					msgTitle: item.msgTitle,
					msgContent:item.msgContent
				});
			});
			return newItems;
		}
	</script>
</html>